{% extends 'base.html' %}
{% load static %}
{% block title %}登录{% endblock %}
{% block css %}<link href="{% static 'login.css' %}" rel="stylesheet"/>{% endblock %}


{% block content %}
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
          <form class='form-login' action="/login/" method="post">

              {% if message %}
                    <div class="alert alert-warning">{{ message }}</div>
              {% endif %}

              {% csrf_token %}
              <h2 class="text-center">欢迎登录</h2>

              <div class="form-group">
                <label for="id_username">用户名：</label>
                <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>
              </div>
              <div class="form-group">
                <label for="id_password">密码：</label>
                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
              </div>
              <button type="reset" class="btn btn-default pull-left">重置</button>
              <button type="submit" class="btn btn-primary pull-right">提交</button>
          </form>
        </div>
    </div> <!-- /container -->
{#    <style>#}
{#        * {#}
{#            margin: 0;#}
{#            padding: 0;#}
{#        }#}
{#        html {#}
{#            height: 100%;#}
{#        }#}
{#        body {#}
{#            height: 100%;#}
{#        }#}
{#        .container {#}
{#            height: 100%;#}
{#            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);#}
{#        }#}
{#        .login-wrapper {#}
{#            background-color: #fff;#}
{#            width: 358px;#}
{#            height: 588px;#}
{#            border-radius: 15px;#}
{#            padding: 0 50px;#}
{#            position: relative;#}
{#            left: 50%;#}
{#            top: 50%;#}
{#            transform: translate(-50%, -50%);#}
{#        }#}
{#        .header {#}
{#            font-size: 38px;#}
{#            font-weight: bold;#}
{#            text-align: center;#}
{#            line-height: 200px;#}
{#        }#}
{#        .input-item {#}
{#            display: block;#}
{#            width: 100%;#}
{#            margin-bottom: 20px;#}
{#            border: 0;#}
{#            padding: 10px;#}
{#            border-bottom: 1px solid rgb(128, 125, 125);#}
{#            font-size: 15px;#}
{#            outline: none;#}
{#        }#}
{#        .input-item:placeholder {#}
{#            text-transform: uppercase;#}
{#        }#}
{#        .btn {#}
{#            text-align: center;#}
{#            padding: 10px;#}
{#            width: 100%;#}
{#            margin-top: 40px;#}
{#            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);#}
{#            color: #fff;#}
{# #}
{#        }#}
{#        .msg {#}
{#            text-align: center;#}
{#            line-height: 88px;#}
{#        }#}
{#        a {#}
{#            text-decoration-line: none;#}
{#            color: #abc1ee;#}
{#        }#}
{# #}
{#    </style>#}
{#    <div class="container">#}
{#        <div class="login-wrapper">#}
{#            <div class="header">Login</div>#}
{#            <div class="form-wrapper">#}
{#                <form action="/login" method="post">#}
{#                <input type="text" name="username" placeholder="username" class="input-item">#}
{#                <input type="password" name="password" placeholder="password" class="input-item">#}
{#                    <input type="submit" value="搜索" class="btn">#}
{#                    </form>#}
{#            </div>#}
{#            <div class="msg">#}
{#                Don't have account?#}
{#                <a href="#">Sign up</a>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

    {% if messages %}
<script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
{% endif %}

{% endblock %}